<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    p:first-letter{
      /* 为p中第一个字符设置特殊格式*/
      color: salmon;
      font-size: 30px;
    }
    p:first-line{
      /* 为p中第一行设置特殊格式*/
      background-color: burlywood;
    }
    p:before{
      /*
       * :before表示元素的最前边的部分
       * :after表示元素的最后边的部分
       * 一般都需要结合content一起使用
       * 通过content可以向before或after的位置添加一些内容
       */
      content: "在P标签的前面";
      color: #8a2be2;
    }
    body > p:first-child{
      /* body下的第一个元素p */
      background-color: #f9e4ac;
    }
    p:nth-child(2){
      /* 选取第二个元素(默认是body下的)
       * 参数为even选取偶数
       * 参数为odd选取奇数
       */
      background-color: #999999;
    }
    p:first-of-type{
      /* 选取第一个指定的元素
       * firs-of -last 选取指定的最后一个元素
       */
      background-color: #cd8c26;
    }
  /*  注意：
   *  child是在所有的子元素中排列
   *  type是在当前类型的子元素中排列
   */
  </style>
</head>
<body>
  <p>我是一大段文字</p>
  <p>我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字</p>
  <p>我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字</p>
  <div>
    <p>我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
      我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
      我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
      我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
      我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
      我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
      我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字</p>
  </div>
</body>
</html>